<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1200px"
    custom-class="scrollable-dialog"
    :close-on-click-modal="false">
    <el-divider content-position="left">注册信息</el-divider>
    <table class="custom-table map10">
        <tr>
          <td class="tr-title">登录账号</td>
          <td>{{items.account}}</td>
          <td class="tr-title">公司名称</td>
          <td>{{ items.name }}</td>
           <td class="tr-title">统一社会信用代码</td>
          <td>{{ items.licenseNo }}</td>
        </tr>
        <tr>
          <td class="tr-title">联系人姓名</td>
          <td>{{ items.contactPerson }}</td>
          <td class="tr-title">联系电话</td>
          <td>{{ items.contactPhone }}</td>
           <td class="tr-title">注册邮箱</td>
          <td>{{ items.email }}</td>
        </tr>
        <tr>
          <td class="tr-title">公司实际办公地址</td>
          <td colspan="5">{{ items.businessAddresss }}</td>
        </tr>
        <tr>
          <td class="tr-title">公司简介</td>
          <td colspan="5">{{ items.descr }}</td>
        </tr>
        <tr>
            <td class="tr-title">营业执照</td>
            <td colspan="5">
                <div class="duo-file">
                    <label v-for="(file, index) in items.licenseFile" :key="index">
                      <template v-if="isImage(file)">
                          <el-image
                          style="width: 40px; height: 40px;margin-right: 6px"
                          :src="file"
                          :preview-src-list="[file]"
                          fit="cover"
                          ></el-image>
                      </template>
                      <template v-else-if="isPDF(file)">
                        <a :href="file" target="_blank"><img style="width: 40px; height: 40px;" src="~@/assets/pdf_file.png"></a>
                      </template>
                    </label>
                </div>
            </td>
        </tr>
      </table>
      <el-divider content-position="left">{{ storeTitle }}</el-divider>
      
      <div class="file-boxs">
        <label>入库类别：</label>
        <div class="file-inner">
          <div class="file-text">
            {{infos.supplierStoreName}}
          </div>
        </div>
      </div>

      <div class="file-boxs" v-if="infos.qualificationCertificateFileReason">
        <label>资质理由：</label>
        <div class="file-inner">
          <div class="file-text">
             {{infos.qualificationCertificateFileReason}}
          </div>
        </div>
      </div>

      <div class="file-boxs" v-if="infos.qualificationCertificateFile">
        <label>资质证书：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.qualificationCertificateFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'qualificationCertificateFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                <span @click="handleImageClick(index,'qualificationCertificateFile')" style="top:32%;">点击查看</span>
                <p class="file-text" v-for="(time,colIndex) in file.time" :key="colIndex"> 
                  {{ colIndex == 0 ? '开始时间：':'结束时间：' }}
                  {{ time }}
                </p>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"> 
                  <span>点击查看</span>
                  <img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png">
                </a>
                <p class="file-text" v-for="(time,colIndex) in file.time" :key="colIndex"> 
                  {{ colIndex == 0 ? '开始时间：':'结束时间：' }}
                  {{ time }}
                </p>
              </template>
            
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>业绩资料：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.performanceFile" :key="index">
            <template v-if="isImage(file.name)">
                   <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'performanceFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'performanceFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>财务报告：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.financialReportFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'financialReportFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'financialReportFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank">
                  <span>点击查看</span>
                  <img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png">
                </a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>完税证明：</label>
        <div class="file-inner">
           <div class="file-flex" v-for="(file,index) in infos.taxProofFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'taxProofFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'taxProofFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>社保证明：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.socialSecurityFile" :key="index">
            <template v-if="isImage(file.name)">
                   <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'socialSecurityFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'socialSecurityFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>商业信誉：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.businessCreditFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'businessCreditFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'businessCreditFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs" style="border-bottom: 0;margin-bottom: 70px;">
        <label>其他：</label>
        <div class="file-hot">
          <div style="margin-bottom: 20px;" v-if="infos.otherRemarks">{{ infos.otherRemarks }}</div>
          <div class="file-inner">
            <div class="file-flex" v-for="(file,index) in infos.otherFile" :key="index">
              <template v-if="isImage(file.name)">
                  <el-image
                    style="width: 180px; height: 120px;"
                    :src="file.url"
                    :ref="'otherFile' + index"
                    :preview-src-list="[file.url]"
                    fit="cover"
                    ></el-image>
                    <span @click="handleImageClick(index,'otherFile')">点击查看</span>
                </template>
                <template v-else-if="isPDF(file.name)">
                  <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
                </template>
            </div>
          </div>
        </div>
      </div>
      <!--入库-->
      <template v-if="isStoreInfo">
         <el-divider content-position="left">审核</el-divider>
         <template v-if="typeOptions.length == 0">
            <el-alert
            title="温馨提示"
            type="error">
            <p>驳回理由未配置数据项！<el-button type="primary" size="mini" @click="toPage">去配置</el-button></p>
          </el-alert>
        </template>
        <el-form :model="applyForm" ref="applyForm" label-width="80px">
              <el-form-item label="审核意见" prop="statusFlag" :rules="[{ required: true, message: '请选择审核意见', trigger: 'change' }]">
                <el-radio-group v-model="applyForm.statusFlag">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="驳回理由" prop="errorType" :rules="[{ required: vildFlag, message: '请选择驳回理由', trigger: 'change' }]">
                <el-select v-model="applyForm.errorType" style="width:100%" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in typeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
               <el-form-item label="备注">
                 <el-input placeholder="请输入" type="textarea" :rows="3" v-model="applyForm.remarks"></el-input>
              </el-form-item>
              
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="visible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="submitAddly('applyForm',1)">提交</el-button>
          </div>
      </template>
      <!--资料-->
      <template v-if="isInfo">
         <el-divider content-position="left">审核</el-divider>
        <el-form :model="applyForm" ref="applyForm" label-width="80px">
              <el-form-item label="审核意见" prop="statusFlag" :rules="[{ required: true, message: '请选择审核意见', trigger: 'change' }]">
                <el-radio-group v-model="applyForm.statusFlag">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="驳回理由">
                 <el-input placeholder="请输入" type="textarea" :rows="3" v-model="applyForm.remarks"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="visible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="submitAddly('applyForm',2)">提交</el-button>
          </div>
      </template>


      <el-dialog title="图片预览" append-to-body :visible.sync="innerVisible">
      <img :src="previewUrl" alt="图片预览" class="previcew-img" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="innerVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

  </el-dialog>
  </template>
  <script>
  import Vue from 'vue'
  import { getSupplierStoreInfo, supplierDetail,supplierStoreCheck } from "@/api/supplier_api";
  import { getDetailByKey} from "@/api/about_api";
  export default {
    props: {
      title: {
        type: String,
        default: () => {
          return "";
        }
      },
      storeTitle: {
        type: String,
        default: () => {
          return "";
        }
      },
      isStoreInfo: {
        type: Boolean,
        default: () => {
          return false;
        }
      },
      isInfo: {
        type: Boolean,
        default: () => {
          return false;
        }
      }
    },
    data(){
        return{
          visible: false,
          innerVisible: false,
            previewUrl:'',
          items: {},
          infos:{},
          typeOptions: [],
            vildFlag: false,
          applyForm: {
            statusFlag: 1,
            errorType:'',
            remarks: '',
            id:''
          },
          previewList:[]
        }
    },
    watch: {
      'applyForm.statusFlag'(newValue, oldValue) {
          this.vildFlag = newValue == 1 ? false : true
      },
      deep:true
    },
    methods: {
      async openStoreForm(row) {
        this.applyForm.statusFlag = 1
        this.applyForm.errorType = ''
        this.applyForm.remarks = ''
        this.applyForm.id = row.id
        this.supplierDetail(row)
        if (this.isInfo || this.isStoreInfo) {
          this.getStoreInfo(row)
        }
        if (this.isStoreInfo) {
          this.getInfo()
        }
      },
      async supplierDetail(row) {
         const { code, data } = await supplierDetail({id:row.storeSupplierId})
        if (code == 200) {
          if (data.licenseFile) {
                data.licenseFile = data.licenseFile.split(",");
              }
          this.items = data
          this.visible = true;
        }
      },
       async getInfo() {
          const { code, data } = await getDetailByKey('rkbh');
          if (code === 200) { 
              if (data) {
                  if (data.value) {
                      this.typeOptions = JSON.parse(data.value)
                  }
              }
          }
      },
      async getStoreInfo(row) {
        const { code, data } = await getSupplierStoreInfo({id:row.id})
        if (code == 200) {
          if (data) {
            if (data.qualificationCertificateFile) {
              data.qualificationCertificateFile = JSON.parse(data.qualificationCertificateFile)
            }
            if (data.qualificationCertificateFileReason) {
              data.qualificationCertificateFile = data.qualificationCertificateFileReason
            }
            if (data.performanceFile) {
              data.performanceFile = JSON.parse(data.performanceFile)
            }
            if (data.financialReportFile) {
              data.financialReportFile = JSON.parse(data.financialReportFile)
            }
            if (data.taxProofFile) {
              data.taxProofFile = JSON.parse(data.taxProofFile)
            }
            if (data.socialSecurityFile) {
              data.socialSecurityFile = JSON.parse(data.socialSecurityFile)
            }
            if (data.businessCreditFile) {
              data.businessCreditFile = JSON.parse(data.businessCreditFile)
            }
            if (data.otherFile) {
              data.otherFile = JSON.parse(data.otherFile)
            }
          }
          this.infos = data
        }
      },
      isImage(file) {
            return /\.(jpg|jpeg|png|gif|webp)$/i.test(file);
        },
        isPDF(file) {
            return /\.pdf$/i.test(file);
      },
      handleImageClick(index, imageList) {
        this.$nextTick(() => {
          const imageRef = this.$refs[imageList + index][0];
          if (imageRef) {
            imageRef.clickHandler();
          }
        });
      },
      toPage() {
         this.$router.push('/supplier/rejection/store');
      },
      submitAddly(formName,state) {
        let that = this
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // if (this.applyForm.statusFlag == 1) {
            //   this.applyForm.errorType = "";
            // }
            if (state == 2) {
              Vue.delete(this.applyForm, 'errorType');
            }
            const { code, msg } = await supplierStoreCheck(this.applyForm);
            if (code === 200) {
              this.$confirm('操作成功，短信已发送供应商。', '温馨提示', {
                confirmButtonText: '关闭',
                cancelButtonText: '取消',
                showCancelButton: false,
                type: 'success'
              }).then(() => {
                that.visible = false;
                that.$emit("onOk");
              }).catch(() => {
                 that.visible = false;
                that.$emit("onOk");
              });
            }
          }
        });
      }
    }
  }
  </script>
  <style scoped>
  .map10{
    margin-bottom:70px;
  }
  .file-boxs{
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
  }
    .file-boxs:last-child{
      border-bottom: 0;
    }
  .file-boxs label{
    flex: 0 0 150px;
    text-align: center;
    font-size: 18px;
    color: #000;
  }
  .file-inner{
    flex: 1;
      display: -webkit-box;
    overflow: auto;
  }
  .file-text{
    color: #000;
    font-size: 16px;
  }
  .file-flex{
    position: relative;
     width: 180px;
     margin-right: 50px;
  }
    .file-flex img{
      display: block;
      max-width: 100%;
    }
      .file-flex span{
         background: rgba(0, 0, 0, 0.5);
         position: absolute;
         top: 50%;
         padding: 10px;
         color: #fff;
         text-align: center;
         left: 0;
         right: 0;
         transform: translate(0,-50%);
         cursor: pointer;
         z-index: 999;
      }
      .file-flex span:hover{
        color: #409EFF;
      }

  </style>
